<template>
    <el-table :data="filterTableData" style="width: 100%">
        <el-table-column label="ID" prop="id" />
        <el-table-column label="商品类型" prop="name" />
        <el-table-column label="创建时间" prop="createTime" :formatter="formatDateTime" />
        <el-table-column label="修改时间" prop="updateTime" :formatter="formatDateTime" />
        <el-table-column label="状态" prop="status" :formatter="formatStatus" />
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="Type to search" />
            </template>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" v-if="scope.row.status === 1">禁用</el-button>
                <el-button size="small" type="danger" @click="handleStart(scope.$index, scope.row)" v-if="scope.row.status === 0">启用</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog v-model="dialogFormVisible" title="修改商品类型">
        <el-form :model="form">
            <el-form-item label="商品类型" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="editCategory()">
                    修改
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import api from '@/api';
import { ElNotification } from 'element-plus';
import { computed, ref, onMounted, reactive } from 'vue'

interface Category {
    id: string
    name: string
    createTime: string
    updateTime: string
    status: number
}

const search = ref('')
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)

const handleEdit = (index: number, row: Category) => {
    dialogFormVisible.value = true
    form.id = row.id
    form.name = row.name
}
const handleDelete = (index: number, row: Category) => {
    api.shop.disableCategoryById({id:row.id})
    .then(response => {
            // 在这里可以处理提交成功后的逻辑
            getCategoryList()
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })


        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
    
}
const handleStart = (index: number, row: Category) => {
    api.shop.enableCategoryById({id:row.id})
    .then(response => {
            // 在这里可以处理提交成功后的逻辑
            getCategoryList()
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })


        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

const tableData = ref<Category[]>([])

onMounted(() => {
    getCategoryList()
})

function getCategoryList() {
    api.shop.getAllCategoryList()
        .then(response => {
            tableData.value = response.data.data
        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
        })
}

function formatDate(row: { date: string }) {
    const date = new Date(row.date);
    return date.toLocaleDateString();
}

function formatTime(row: { time: string }) {
    const date = new Date(row.time);
    return date.toLocaleTimeString();
}

function formatDateTime(row: { createTime: string }) {
    const date = new Date(row.createTime);
    return date.toLocaleString();
}

function formatStatus(row: { status: number }) {
    return row.status === 1 ? '已启用' : '未启用';
}

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
    id: '',
    name: '',
})

function editCategory() {
    api.shop.editCategory(form)
        .then(response => {
            // 在这里可以处理提交成功后的逻辑
            getCategoryList()
            dialogFormVisible.value = false
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })


        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
            // 在这里可以处理提交失败后的逻辑
        });
}

</script>

<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
  